<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
		<style>
		.first-face{
			display:inline-flex;
			justify-content: space-between;
		}
		.second-face{
			display: inline-flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.third-face{
			display: inline-flex;
			align-items: center;
		}
		.fourth-face{
			display: inline-flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
		}
		.sixth-face{
			display:inline-flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-end;
		}
		.seventh-face{
			display: inline-flex;
		}
		.pip1{
			align-self: center;
		}
		.eigth-face{
			display: inline-flex;
			justify-content: space-between;
		}
		.pip2{
			align-self: flex-end;
		}
		</style>
	<body>
		<div class="first-face">
			<div class="pip"></div>
			<div class="pip"></div>
		</div>
		<div class="second-face">
			<div class="pip"></div>
			<div class="pip"></div>
		</div>
		<div class="third-face">
			<div class="pip"></div>
			<div class="pip"></div>
		</div>
		<div class="fourth-face">
			<div class="pip"></div>
			<div class="pip"></div>
		</div>
		<div class="sixth-face">
			<div class="pip"></div>
			<div class="pip"></div>
		</div>
		<div class="seventh-face">
			<div class="pip"></div>
			<div class="pip pip1"></div>
		</div>
		<div class="eigth-face">
			<div class="pip"></div>
			<div class="pip pip2"></div>
		</div>
		
		
	</body>
</html>
